<template>
  <div style="margin: 20px;
    border: #ebeef5 solid 1px;
    border-radius: 4px;
    padding: 15px;">
    <el-row style="margin-bottom: 15px;">
      <el-col :span="12" style="line-height: 36px;">
        <span>授权</span>
      </el-col>
      <el-col :span="12">
        <el-button size="medium" type="primary"  @click="submitForm()" style="float: right">提交</el-button>
      </el-col>
    </el-row>
    <div v-if="treeData">
      <el-row :gutter="1" v-for="treeRow in treeData">
        <el-col :span="24/treeRow.length" class="grid-div" v-for="treeCol in treeRow">
          <el-scrollbar>
            <div class="grid-content">
              <el-tree
                ref="tree"
                :data="[treeCol]"
                :props="defaultProps"
                show-checkbox
                node-key="id"
                default-expand-all
                :default-checked-keys="formData.resIds"
                :expand-on-click-node="false">
              </el-tree>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
    <el-row style="text-align: center;margin-top: 20px;">
      <el-button size="medium" type="primary" @click="submitForm()">提交</el-button>
      <el-button size="medium" @click="$router.back(-1)">返回</el-button>
    </el-row>
  </div>
</template>
<script>
import { setRoleRes, getRoleRes, getResTree } from '@/api/sys/auth/role/index'
export default {
  data() {
    return {
      checkAll: false,
      treeData: [],
      formData: {
        resIds: [],
        roleCode: this.$route.query.roleCode
      },
      defaultProps: {
        children: 'children',
        label: 'resName'
      }
    }
  },
  created() {
    if(!this.formData.roleCode){
      this.$router.push({ name: 'role_mgr_list' })
    }
    this.getResTree()
    this.getRoleRes()
  },
  methods: {
    submitForm() {
      this.loading = true
      this.getSelected()
      setRoleRes(this.formData).then(() => {
        this.loading = false
        // 提示信息
        this.$message({
          showClose: true,
          message: '授权成功',
          type: 'success'
        })
        this.$router.push({ name: 'role_mgr_list' })
      }).catch(() => {
        this.loading = false
      })
    },
    getResTree(){
      getResTree().then(response => {
        this.treeData=response.data
        setTimeout(() => {
        }, 1.5 * 1000)
      })
    },
    getSelected() {
      this.formData.resIds=[]
      for(let index in this.$refs.tree){
        let selected = this.$refs.tree[index].getCheckedKeys(false)
        if(selected.length>0){
          this.formData.resIds = this.formData.resIds.concat(selected)
        }
      }
    },
    getRoleRes() {
      getRoleRes(this.formData.roleCode).then(response => {
        this.formData.resIds = response.data
      })
    }
  }
}
</script>
<style scoped>
  .grid-content {
    height: 360px;
  }
  .grid-div{
    border: #ebeef5 solid 1px;
    padding-top: 15px;
    padding-left: 15px;
  }
</style>
